<!-- 
    @file: 文章详情页-内容详情
    @auth: lizibin
 -->
<template>
    <div class="search_article">
        <div class="titleBox">
            <p>{{ state.classifyInfo.articleNumber }}篇更新</p>
            <h3># {{ state.classifyInfo.classifyName }}</h3>
            <p>{{ state.classifyInfo.classifyIntroduce }}</p>
        </div>
        <div class="contentBox" v-loading="state.loading" element-loading-text="玩命加载中...">
            <div class="titleWrapper">
                <h3 class="title"><b>全部</b></h3>
            </div>
            <div v-if="state.articleInfo.length < 1" class="emptyImg">暂无相关数据</div>
            <div class="articleBox" v-for="item in state.articleInfo">
                <div @click="RouterJump('articleDetails', item.articleId)" class="articleBox-jump">
                    <h4 class="title highlight">{{ item.articleTitle }}</h4>
                    <div class="article">
                        <img v-if="item.articleImgLitimg" class="focus" :src="item.articleImgLitimg"
                            :alt="item.articleTitle">
                        <!-- 内容样式根据有没有图片改变 -->
                        <div class="textBox" :class="[item.articleImgLitimg ? '' : 'textBox2']">
                            <p style="margin-bottom: 25px;" class="highlight">{{ item.articleDase }}</p>
                            <!--<p>TolZB · 11月前 · 分类</p>-->
                            <p class="hidden-sm-and-up highlight">{{ item.userName }} · {{ item.publishTime }} ·
                                {{ item.articleClassifyName }}</p>
                            <p class="articleMessage hidden-xs-only"><span>
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                    <font class="highlight">{{ item.userName }}</font>
                                </span>
                                <span>
                                    <el-icon>
                                        <FolderOpened />
                                    </el-icon>
                                    <font class="highlight">{{ item.articleClassifyName }}</font>
                                </span>
                                <span>
                                    <el-icon>
                                        <Timer />
                                    </el-icon>{{ item.publishTime }}
                                </span>
                                <span>
                                    <el-icon>
                                        <View />
                                    </el-icon>{{ item.click }}
                                </span>

                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!--
			    total 总行数
			    page-size	每页显示条目个数
			    current-change 改变页码时触发
			    currentPage:当前页码
			 -->
            <el-pagination class="showPaging" background layout="prev, pager, next" :total="state.total" :page-size="state.pageSize"
                @current-change="changePage" v-model:currentPage="state.currentPage" :pager-count="3"
                :hide-on-single-page="true" />
            <el-pagination class="hidePaging" background layout="prev, pager, next, jumper" :total="state.total"
                :page-size="state.pageSize" @current-change="changePage" v-model:currentPage="state.currentPage" :pager-count="3"
                :hide-on-single-page="true" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    reactive,
    onMounted,
    watch
} from 'vue'
import { FormatDate } from '@/utils/time'
import {
    useRoute,
    useRouter
} from 'vue-router'
import { GetArticlebyClassifyId, GetClassifyInfoByClassifyId } from '@/api/foreground/index'
import { SearchDetail } from '@/types/articleTypes'
const route = useRoute();
const router = useRouter();
const RouterJump = (name: string, val: number) => {
    router.push({
        path: name,
        query: {
            id: val
        }
    })
}
const state = reactive<SearchDetail>({
    // 展示文章信息
    articleInfo: [],
    // 分类信息
    classifyInfo: {
        articleNumber: 0,
        classifyId: 0,
        classifyIntroduce: '',
        classifyName: '',
        color1: '',
        color2: '',
    },
    total: 0, //总条数
    pageSize: 8, //每页显示行数
    currentPage: 1, //当前页码
    loading: false,// 加载
})
// const { articleInfo, classifyInfo, total, pageSize, currentPage, loading } = state;
/**
 * @desc 加载获取数据
 */
const loadData = (classifyId = route.query.id) => {
    // 根据分类id查询分类信息
    const params = {
        classifyId: route.query.id
    }
    GetClassifyInfoByClassifyId(params).then(res => {
        state.classifyInfo = res.data;
    })
    state.loading = true;
    // 根据分类id 查询分类的文章
    const params2 = {
        currentPage: Number(state.currentPage),
        pageSize: Number(state.pageSize),
        // route.params.id 跳转到当前路由携带着分类id
        classifyId
    }
    GetArticlebyClassifyId(params2).then((res) => {
        // 先清空数据
        state.articleInfo = [];
        res.data.forEach((element) => {
            // 时间戳格式化
            element.publishTime = FormatDate(element.publishTime);
            // 图片 根url
            const url = import.meta.env.VITE_HTTP;
            // 缩略图 判断是点击上传的还是，网络图片
            if (element.articleImgLitimg != "" && !element.articleImgLitimg.includes('http') && !element.articleImgLitimg.includes('https')) {
                element.articleImgLitimg = url + element.articleImgLitimg
            }

            // 添加
            state.articleInfo.push(element)
        });
        //JSON.parse 将从后台得到的数据转换为标准JSON格式
        //前台展示的是需要数组，JSON.parse转换后的数据，element-plus可以解析
        // state.tableData = res.data.data.list;
        state.total = Number(res.total);
        state.pageSize = Number(res.pageSize);
        state.currentPage = Number(res.currentPage);
        state.loading = false;
    })
}
watch(() => route.query.id, (newval, oldval) => {
  loadData(newval)
})
//挂载后加载数据
onMounted(() => {
    
    loadData();
});

// 切换页面的执行事件，  val 当前页码
const changePage = (val: number) => {
    state.currentPage = val;
    loadData();
};
</script>

<style>
.articleBox-jump {
    cursor: pointer;
}
.search_article .titleBox {
    width: 100%;
    background-color: white;
    padding: 20px;
    /* 添加此属性 padding间距不扩大div */
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 20px;
}

.search_article .titleBox h3 {
    font-size: 32px;
    color: #333;
    line-height: 36px;
    margin: 10px 0;
}

.search_article .titleBox p {
    font-size: 12px;
    color: #999;
}

.search_article .moreInfo {
    font-size: 12px;
    line-height: 18px;
    text-align: justify;
    color: #999;
}

.search_article .moreInfo b {
    margin: 0 10px;
}

.search_article .contentBox {
    width: 100%;
    padding: 20px;
    /* 添加此属性 padding间距不扩大div */
    box-sizing: border-box;
    background: white;
    border-radius: 10px;
}

.search_article .titleWrapper {
    /* margin-bottom: 15px; */
    margin-top: -10px;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.search_article .titleWrapper .title {
    line-height: 40px;
    color: #454545;
}

.search_article .titleWrapper .title b {
    display: inline-block;
    border-bottom: 4px solid #2FA7B9;
}


/* 文章样式 */
.articleBox {
    padding: 20px 0;
    background-color: white;
    border-bottom: 1px solid #eee;
}

.articleBox .title {
    font-size: 18px;
    line-height: 45px;
    color: #454545;
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    text-align: justify;
}

.articleBox .title:hover {
    color: #2FA7B9;
}

.article {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
}

.article img {
    width: 140px;
    height: 90px;
    border-radius: 4px;
    object-fit: cover;
    overflow: hidden;
}

.articleMessage span {
    font-size: 13px;
    color: #999;
    line-height: 20px;
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
}

.articleMessage .el-icon {
    font-size: 15px;
    margin-right: 8px;
}

.textBox {
    width: 750px;
    /* height: 100px; */
    line-height: 22px;
    font-size: 13px;
    color: #999;
    margin-left: 10px;
}

.textBox2 {
    width: auto;
    margin-left: 0px;
}

.textBox p {
    font-size: 15px;
    color: #999;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-align: justify;
    cursor: pointer;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .textBox {
        width: 500px;
    }
}

.emptyImg {
    display: block;
    width: 307px;
    min-height: 170px;
    background: url(../../../../../../assets/dgy-empty.png) no-repeat;
    background-size: 307px 160px;
    margin: 120px auto 0;
    padding-top: 170px;
    text-align: center;
    font-size: 12px;
    line-height: 24px;
    color: #999;
}

/* 分页样式 */
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background-color: #2fa7b9;
}

.el-pagination {
    margin-top: 20px;
    justify-content: center;
}

:deep(.el-table .cell) {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

@media screen and (max-width: 500px) {
    .hidePaging {
        display: none;
    }
}

@media screen and (min-width: 500px) {
    .showPaging {
        display: none;
    }
}
</style>